<template>
  <div class="canvas-page f-c">
    <BackPage title="流程图配置" show-back @back="onPageBack" />
    <div class="user1-add-box f-c f-g" style="overflow:hidden;">
      <div style="padding-left: 20px">
        <el-form inline>
          <el-form-item label="选择模版：">
            <el-select
              @change="changeCategory"
              v-model="searchParams.bigCategoryId">
              <el-option v-for="item in options1" :key="item.id" :value="item.id" :label="item.templateCategory" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目子类别：">
            <el-select
              @change="changeSubCategory"
              v-model="searchParams.smallCategoryId">
              <el-option v-for="item in options2" :key="item.id" :value="item.id" :label="item.templateCategory" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { http_project_process, http_project_process_template } from '@/api'
export default {
  name: 'Config',
  components: {
  },
  data() {
    return {
      searchParams: {
        bigCategoryId: '',
        smallCategoryId: ''
      },
      options1: [
      ],
      options2: [],
    }
  },
  created() {
    http_project_process_template.getCategory({ top: 0 }).then(res => {
      this.options1 = res.data
    })
  },
  mounted() {
    this.$nextTick(() => {
      http_project_process.read({
        projectId: this.$route.query.projectId
      }).then(res => {
        const { bigCategoryId, smallCategoryId, canvas } = res.data
        this.searchParams.bigCategoryId = bigCategoryId
        this.searchParams.smallCategoryId = smallCategoryId
        this.changeCategory(bigCategoryId)
        if (canvas) {
          this.$refs.canvasRef.initEdit({
            item: { ...this.searchParams },
            templateRes: res
          })
        }
      })
    })
  },
  methods: {
    onPageBack() {
      this.$router.replace({
        path: '/project/project2'
      })
    },
    changeCategory(val) {
      if (val) {
        http_project_process_template.getCategory({ top: 1, parentId: val }).then(res => {
          this.options2 = res.data
        })
      } else {
        this.options2 = []
      }
    },
    changeSubCategory() {
      // 获取模版
      this.$nextTick(() => {
        this.$refs.canvasRef.initAdd({
          ...this.searchParams
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 30px;
}
.canvas-page {
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
</style>
